// 判断是否能进去购物车
if( document.cookie === ''){
    window.location.href = '../pages/login.html'
}

//显示和隐藏
$('.top-r_login').on({
    mouseout:function(){  
      $('.top-r_select').show() 
    },
   mouseleave:function(){
    $('.top-r_select').finish().hide() 
   } 
})
// 点击搜索改变边框
var searchBtn = document.querySelector('.search_btn')
searchBtn.onfocus = function (){
  searchBtn.style.borderColor = '#ff1268'
}
searchBtn.onblur = function(){
    searchBtn.style.borderColor = '#f8f8f8'
}

// 登录操作
if(getCookie('uname') === '' ){
    $('.top-r_login').click(function(){
        window.location.href = '../pages/login.html'
    })
}

var myname = getCookie('uname')
if( $('.top-r_login_lg').text() !== myname ){
$('.top-r_login_lg').text(`${myname}`)
$('.login_out').css('display','block')
 if( myname === ''){
    $('.top-r_login_lg').text('登录')
    $('.login_out').css('display','none') 
 }
}
$('.login_out').click(function(){
    $('.top-r_login_lg').text('登录')
    $('.login_out').css('display','none') 
    window.location.href = '../pages/index.html'
    setCookie('uname',1,-1)
})

// 点击回到顶部
$(window).scroll(function(){
    // console.log()
    if($(window).scrollTop() >=240){
         $('.rtop').show()
    }else{
        $('.rtop').hide()
    }
})
$('.rtop').click(function(){

  $('html').animate({
      scrollTop:0
  },300)
})

// 获取数据
let cartList = JSON.parse(localStorage.getItem('cartList'))


    // if(cartList.length === 0){
    //     $('.notgoods').css('display','block')
    //     console.log($('.order_list_cont'))
    //     $('.order_list_cont').css('display','none')
    // }else{
    //     $('.notgoods').css('display','none')
    //     bindHtml()
    //     bindEvent()
    // }

    if(!cartList || cartList.length === 0){
        $('.notgoods').css('display','block')
        $('.order_list_cont').css('display','none')
    }else{
        bindHtml()
        bindEvent()
    }

// 渲染页面

function bindHtml(){
    let selectAll = cartList.every(item =>{
        return item.isSelect === true
    })
let str  = `
<div class="next-col order_list_item">
                 <div class="order_list_item_header ">
                     <span class="qx">全选：</span>
                     <input class="selall"  type="checkbox" ${ selectAll ? 'checked' : '' }>
                 </div>
`
cartList.forEach(item =>{
     str += `
    <div class="order_list_item_bm next-row">
    <div class="next-col goods-name">
        <div class="next-row goods-name_wrp">
            <div class="goods-wrp_img next-col">
                <img src="${ item.verticalPic }" alt="">
            </div>
            <div class="goods-wrp_cont next-col">
                     <div class="next-row wrp-name">${item.name}</div>
                     <div class="next-row wrp-time">
                         <span>演出时间：${item.showtime}单人通票</span>
                     </div>
                     <div class="next-row wrp-city">
                         城市：${item.cityname}
                     </div>
                     <div class="next-row wrp-price">
                         单价：<span >${item.price}</span>
                     </div>

            </div> 
        </div>
    </div>
    <div  class="next-col goods-num">
        <div class="goods_number clearfixer">
            <button class="sub"data-id=${ item.id }  >-</button>
            <input type="text" value="${ item.number }">
            <button class="add"data-id=${ item.id } >+</button>
        </div>    
    </div>
    <div  class="next-col goods-pirce">
        <div class="sbtot">￥：<span>${ item.subtotal.toFixed(2) }</span> </div>
    </div>
    <div  class="next-col goods-status">
        <input class="selbox" type="checkbox" ${ item.isSelect ? 'checked' : '' } data-id=${ item.id } >
    </div>
    <div  class="next-col goods-opt" >
        <p class="del" data-id=${ item.id } >删除商品</p>
    </div>
 </div>
    
    `
})
 // 选中商品数量需要渲染
let selectArr = cartList.filter(item =>item.isSelect)

   // 选中商品数量计算
let  selectNumber = 0
   // 选中商品总价
let  selectPrice = 0

selectArr.forEach(item =>{
    selectNumber += item.number
    selectPrice += item.subtotal
})

str +=`
      <div class="last clearfixer">
      <div class="allpirce">总价：
          <i>${selectPrice}</i>
      </div>
      <button class="match" ${ selectArr.length ? '' : 'disabled'}>
          去结算<div class="goods_all">(${ selectNumber }<span>件</span>)</div>
      </button>
      <button class="delall">清空购物车</button>
      </div>
`
// 天加到页面里
$('.order_list_cont').html(str)

}
function bindEvent(){
    // 全选事件
    $('.order_list_cont').on('click','.selall',function(){
        cartList.forEach(item=>{
            item.isSelect = this.checked
        })
        //重新渲染页面
        bindHtml()
        // 重新储存localStorage
        localStorage.setItem('cartList', JSON.stringify(cartList))
    })
    // 单选按钮事件
    $('.order_list_cont').on('click','.selbox',function(){
        const id = $(this).data('id')
        cartList.forEach(item=>{
            if(item.id === id){
                item.isSelect = !item.isSelect
            }
        })
             //重新渲染页面
             bindHtml()
             // 从新存储到 lcoalStorage 里面
             localStorage.setItem('cartList', JSON.stringify(cartList))
    })
 
    //  减少商品
    $('.order_list_cont').on('click','.sub',function(){
        const id = $(this).data('id')
        cartList.forEach(item =>{
            if(item.id === id ){
                item.number > 0 ? item.number-- : 0
                item.subtotal = item.number * item.price
            }
        })
        //重新渲染页面
        bindHtml()
        // 从新存储到 lcoalStorage 里面
        localStorage.setItem('cartList', JSON.stringify(cartList))
    })
    // 添加商品
    $('.order_list_cont').on('click','.add',function(){
        const id = $(this).data('id')
        cartList.forEach(item =>{
            if(item.id === id ){
                item.number < 10 ? item.number++ : 10
                item.subtotal = item.number * item.price
            }
        })
        //重新渲染页面
        bindHtml()
        // 从新存储到 lcoalStorage 里面
        localStorage.setItem('cartList', JSON.stringify(cartList))
    })
    // 点击删除
    $('.order_list_cont').on('click','.del',function(){
        const id = $(this).data('id') 
        cartList.forEach((item,index) =>{
            if(item.id === id){
                
            cartList.splice(index,1)
            }
        })
        if(cartList.length  === 0){
            $('.notgoods').css('display','block')
            bindHtml()
            $('.order_list_cont').css('display','none')
        }else{
            bindHtml()        
        }  
            // 从新存储到 lcoalStorage 里面
            localStorage.setItem('cartList', JSON.stringify(cartList)) 
    })
// 清空商品
    $('.order_list_cont').on('click', '.delall', function () {
      cartList = []
      //重新渲染页面
      bindHtml()
      // 从新存储到 lcoalStorage 里面
      $('.notgoods').css('display','block')
      $('.order_list_cont').css('display','none')
      localStorage.setItem('cartList', JSON.stringify(cartList))
  })   
}


